<template>
  <page-header-wrapper>
    <a-result title="该功能暂未开放" @click="notopened" style="padding-top: 120px">
      <template #extra>
      </template>
    </a-result>
    <div style="display:none">
      <a-card :bordered="false" v-show="disvisible===0">
        <a-icon type="menu-fold" @click="turnSmall" class="turnSmall" v-if="treespan===4"></a-icon>
        <a-icon type="menu-unfold" @click="turnSmall" class="turnSmall" v-if="treespan===0"/>
        <a-row :gutter="13">
          <a-col :span="treespan">
            <a-skeleton active :paragraph="{ rows: 5 }" :loading="menuLoading" />
            <s-tree
              :dataSource="orgTree"
              :openKeys.sync="openKeys"
              :search="false"
              @click="handleClick">
            </s-tree>
          </a-col>
          <a-col :span="tablespan">
            <!-- <a-skeleton active :paragraph="{ rows: 5 }" :loading="menuLoading" /> -->
            <a-radio-group v-model="reviewStatus" @change="()=>{this.getTableData()}" style="margin-bottom:1%" >
              <a-radio-button value="0">
                <a-icon type="bars" /> 初评
              </a-radio-button>
              <a-radio-button value="2">
                <a-icon type="database" /> 复评
              </a-radio-button>
              <a-radio-button value="1">
                <a-icon type="hdd" /> 中止
              </a-radio-button>
            </a-radio-group>
            <a-table
              ref="table"
              size="default"
              :loading="loading"
              :columns="columns"
              :row-key="record => record.project_id"
              :data-source="dataSource"
              :alert="false"
              :pagination="pagination"
              @change="handlePageChange"
              :maskClosable="false"
              bordered
            >
              <div
                slot="filterDropdown"
                slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
                style="padding: 8px"
              >
                <a-input
                  v-ant-ref="c => (searchInput = c)"
                  :placeholder="`搜索 ${column.dataIndex}`"
                  :value="selectedKeys[0]"
                  style="width: 188px; margin-bottom: 8px; display: block;"
                  @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
                  @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
                />
                <a-button
                  type="primary"
                  icon="search"
                  size="small"
                  style="width: 90px; margin-right: 8px"
                  @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
                >
                  搜索
                </a-button>
                <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters)">
                  重置
                </a-button>
              </div>
              <a-icon
                slot="filterIcon"
                slot-scope="filtered"
                type="search"
                :style="{ color: filtered ? '#108ee9' : undefined }"
              />
              <template slot="customRender" slot-scope="text, record, index, column">
                <span v-if="searchText && searchedColumn === column.dataIndex">
                  <template
                    v-for="(fragment, i) in text
                      .toString()
                      .split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))"
                  >
                    <mark
                      v-if="fragment.toLowerCase() === searchText.toLowerCase()"
                      :key="i"
                      class="highlight"
                    >{{ fragment }}</mark
                    >
                    <template v-else>{{ fragment }}</template>
                  </template>
                </span>
                <template v-else>
                  {{ text }}
                </template>
              </template>
              <span slot="action" slot-scope="text, record">
                <span>
                  <a @click="detail(record)">详情</a>
                  <a-divider type="vertical" />
                  <a @click="reEvaluation(record)">复评</a>
                  <a-divider type="vertical" />
                  <a>中止评审</a>
                </span>
              </span>
            </a-table>
          </a-col>
        </a-row>
        <a-modal title="详情" :visible="detailVisible" @cancel="detailCancel" width="60%" :maskClosable="false">
          <a-form-model :label-col="{span: 7}" :wrapper-col="{span: 7}">
            <a-form-model-item label="工程名称" :style="{ display: 'inline-block', width: 'calc(50% - 12px)', margin: '0' }">
              <p>{{ detailmess.name }}</p>
            </a-form-model-item>
            <a-form-model-item label="项目地址" :style="{ display: 'inline-block', width: 'calc(50% - 12px)', margin: '0' }">
              <p>{{ detailmess.address }}</p>
            </a-form-model-item>
            <a-form-model-item label="项目总分" :style="{ display: 'inline-block', width: 'calc(50% - 12px)', margin: '0' }">
              <p>{{ detailmess.total_score }}</p>
            </a-form-model-item>
            <a-form-model-item label="项目得分" :style="{ display: 'inline-block', width: 'calc(50% - 12px)', margin: '0' }">
              <p>{{ detailmess.score }}</p>
            </a-form-model-item>
            <a-form-model-item label="其中文明施工分项得分为" :style="{ display: 'inline-block', width: 'calc(50% - 12px)', margin: '0' }">
              <p>{{ reviewStatus }}</p>
            </a-form-model-item>
          </a-form-model>
          <!-- <a-collapse v-model="activeKey" expand-icon-position="right">
            <a-collapse-panel v-for="(item, i) in detailmess.list" :key="`${i}`" :header="item.list_name"> -->
          <div v-for="(item, i) in detailmess.list" :key="`${i}`">
            <h1 style="margin: 5px">{{ item.list_name }}</h1>
            <a style="margin: 5px;float: left">现场亮点</a>
            <a style="margin: 5px;float: left">现场缺点</a>
            <p style="margin: 5px;float: left">该项得分值：{{ item.score }}</p>
            <a-table
              :columns="nuclearOptioncolumns"
              :pagination="false"
              :data-source="item.check_list"
              :row-key="record => record.child_id"
              :row-selection="{ selectedRowKeys: selectedNuclearRowKeys, onChange: onSelectNuclearChange, rowSelection: rowNuclearSelection }"
            >
            </a-table>
            <a-table
              :columns="scoringItemcolumns"
              :pagination="false"
              :data-source="item.score_list"
              :row-key="record => record.child_id"
              :row-selection="{ selectedRowKeys: selectedScoringRowKeys, onChange: onSelectScoringChange, rowSelection: rowScoringSelection }"
            >
            </a-table>
          </div>
          <!-- </a-collapse-panel>
          </a-collapse> -->
          <template slot="footer">
            <a-button type="primary" :disabled="!deleteScoring&&!deleteNuclear" @click="edit">删除</a-button>
            <a-button type="primary">下发整改</a-button>
            <a-button type="primary" @click="output">记录输出</a-button>
            <a-button @click="detailCancel">关闭</a-button>
          </template>
        </a-modal>
      </a-card>
    </div>
  </page-header-wrapper>
</template>

<script>
import STree from '@/components/Tree/Tree'
import { STable } from '@/components'
import OrgModal from '../other/modules/OrgModal'
// import { getServiceList } from '@/api/manage'
// eslint-disable-next-line no-unused-vars
import { menuFinds, askTable, getDetail, operateTable } from '@/api/mobileManage'
import Table from '../list/table/table.vue'
import AvatarModal from '../account/settings/AvatarModal.vue'

const delay = (function () {
 let timer = 0
 return function (callback, ms) {
  clearTimeout(timer)
  timer = setTimeout(callback, ms)
 }
})()
export default {
  name: 'TreeList',
  components: {
    STable,
    STree,
    OrgModal,
    Table,
    AvatarModal
  },
  data () {
    return {
      menuLoading: true,
      searchText: '',
      disvisible: 0,
      projectname: '',
      searchmanual: '',
      projectTypeId: 1,
      loading: true,
      openKeys: ['1'],
      treespan: 4,
      tablespan: 20,
      dataSource: [],
      pagination: {
        pageSize: 10,
        current: 1,
        total: 0,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '30', '50']
      },
      originalData: [],
      // 表头
      columns: [],
      orgTree: [],
      detailmess: {},
      reviewStatus: '0',
      detailVisible: false,
      activeKey: [0],
      scoringItemcolumns: [
        {
          title: '类型',
          dataIndex: 'child_type'
        },
        {
          title: '名称',
          dataIndex: 'child_name'
        },
        {
          title: '满分值',
          dataIndex: 'list_child_score'
        },
        {
          title: '得分值',
          dataIndex: 'score'
        },
        {
          title: '扣分原因',
          dataIndex: 'score_reason'
        },
        {
          title: '是否缺项',
          dataIndex: 'is_none'
        },
        {
          title: '专家名称',
          dataIndex: 'expert_name'
        },
        {
          title: '评审状态',
          dataIndex: 'score_finish'
        },
        {
          title: '评审时间',
          dataIndex: ''
        },
        {
          title: '备注',
          dataIndex: 'score_remarks'
        }
      ],
      nuclearOptioncolumns: [
        {
          title: '类型',
          dataIndex: 'child_type'
        },
        {
          title: '名称',
          dataIndex: 'child_name'
        },
        {
          title: '内容',
          dataIndex: 'list_child_desc'
        },
        {
          title: '是否符合',
          dataIndex: 'is_fit'
        },
        {
          title: '不符合原因',
          dataIndex: 'unfit_reason'
        },
        {
          title: '专家名称',
          dataIndex: 'expert_name'
        },
        {
          title: '评审状态',
          dataIndex: 'score_finish'
        },
        {
          title: '评审时间',
          dataIndex: ''
        },
        {
          title: '备注',
          dataIndex: ''
        }
      ],
      selectedNuclearRowKeys: [],
      rowNuclearSelection: [],
      selectedScoringRowKeys: [],
      rowScoringSelection: []
    }
  },
  watch: {
    searchmanual: function (newVal, oldVal) {
      delay(() => {
        this.onSearchmanual(newVal)
      }, 1000)
    },
    activeKey (key) {
      console.log(key)
    }
  },
  computed: {
    deleteNuclear () {
      return this.selectedNuclearRowKeys.length > 0
    },
    deleteScoring () {
      return this.selectedScoringRowKeys.length > 0
    }
  },
  created () {
    this.getMenuInfo()
  },
  methods: {
    // 左侧树点击
    handleClick (e) {
      console.log('handleClick', e)
      this.projectTypeId = e.key
      // this.$refs.table.refresh(true)
      this.getTableData()
    },
    // 获取左侧树状信息
    getMenuInfo () {
      // this.loading = true
      this.menuLoading = true
      menuFinds().then(res => {
        this.orgTree = res.result
        // 获取menu后表格默认显示第一个menu的数据
        this.projectTypeId = this.orgTree[0].key
        this.getTableData()
        this.menuLoading = false
        // this.loading = false
      })
    },
    // 列搜索
    handleSearch (selectedKeys, confirm, dataIndex) {
      confirm()
      this.searchText = selectedKeys[0]
      this.searchedColumn = dataIndex
    },
    // 列搜索重置
    handleReset (clearFilters) {
      clearFilters()
      this.searchText = ''
    },
    // 对动态请求到的表头数组遍历插入列搜索相关slot及函数 详见ant design vue文档
    headerPush (data) {
      data.forEach(item => {
        item['scopedSlots'] = { filterDropdown: 'filterDropdown', filterIcon: 'filterIcon', customRender: 'customRender' }
        item['onFilter'] = (value, record) =>
            record[item.dataIndex]
              .toString()
              .toLowerCase()
              .includes(value.toLowerCase())
        item['onFilterDropdownVisibleChange'] = visible => {
          if (visible) {
            setTimeout(() => {
              this.searchInput.focus()
            }, 0)
          }
        }
      })
    },
    // 获取表头及数据
    getTableData () {
      this.loading = true
      var formdata = {
        project_type_id: this.projectTypeId,
        review_status: this.reviewStatus
      }
      // new FormData()
      // formdata.append('project_type_id', this.projectTypeId)
      // formdata.append('review_status', this.reviewStatus)
      askTable(formdata).then(res => {
        this.columns = res.result.headList
        this.headerPush(this.columns)
        this.columns.push({ title: '专业', dataIndex: 'review_major' })
        this.columns.push({ title: '操作', dataIndex: 'action', scopedSlots: { customRender: 'action' }, key: 'action', align: 'center', fixed: 'right', width: 210 })
        console.log(this.columns)
        this.originalData = res.result.data.data
        this.dataSource = res.result.data.data
        this.pagination.total = res.result.data.total
        this.loading = false
      })
    },
    // 左侧树状菜单收缩
    turnSmall () {
      this.tablespan === 20 ? this.tablespan = 24 : this.tablespan = 20
      this.treespan === 0 ? this.treespan = 4 : this.treespan = 0
    },
    handlePageChange (pagination) {
      this.pagination.current = pagination.current
      this.pagination.pageSize = pagination.pageSize
      this.dataSource = JSON.parse(JSON.stringify(this.originalData))
      this.dataSource = this.dataSource.slice((this.pagination.current - 1) * this.pagination.pageSize, this.pagination.current * this.pagination.pageSize)
      // console.log(this.dataSource)
    },
    detail (record) {
      console.log(record)
      var detailms = {
        review_definition_id: record.review_definition_id
      }
      getDetail(detailms).then(res => {
        if (res.code === 200) {
          this.detailmess = res.result
          console.log(res.result)
        }
      })
      this.detailVisible = true
    },
    detailCancel () {
      this.detailVisible = false
    },
    reEvaluation (record) {
      var operation = {
        review_definition_id: record.review_definition_id,
        operation: 're_evaluation'
      }
      operateTable(operation).then(res => {
        if (res.code === 200) {
          this.$message.success('操作成功')
        } else {
          this.$message.error('操作失败')
        }
      })
    },
    onSelectNuclearChange (selectedRowKeys, rowSelection) {
      this.selectedNuclearRowKeys = selectedRowKeys
      this.rowNuclearSelection = rowSelection
      console.log(this.selectedNuclearRowKeys)
      console.log(this.rowNuclearSelection)
    },
    onSelectScoringChange (selectedRowKeys, rowSelection) {
      this.selectedScoringRowKeys = selectedRowKeys
      this.rowScoringSelection = rowSelection
      console.log(this.selectedScoringRowKeys)
      console.log(this.rowScoringSelection)
    },
    edit () {
      var arr = [...this.selectedNuclearRowKeys, ...this.selectedScoringRowKeys]
      console.log(arr)
    },
    output () {

    }
  }
}
</script>

<style lang="less" scoped>
  .size_p{
    font-size: 20px;
    margin: 5px;
  }
  .title_h{
    font-size: 30px;
  }
  .size_h{
    font-size: 20px;
    margin: 5px;
  }
  .custom-tree {

    /deep/ .ant-menu-item-group-title {
      position: relative;
      &:hover {
        .btn {
          display: block;
        }
      }
    }

    /deep/ .ant-menu-item {
      &:hover {
        .btn {
          display: block;
        }
      }
    }

    /deep/ .btn {
      display: none;
      position: absolute;
      top: 0;
      right: 10px;
      width: 20px;
      height: 40px;
      line-height: 40px;
      z-index: 1050;

      &:hover {
        transform: scale(1.2);
        transition: 0.5s all;
      }
    }
  }
  .turnSmall{
    cursor: pointer;
    font-size: 20px;
    transition: all 0.3s;
    position: relative;
    top: -10px;
  }
  .turnSmall:hover {
    color: #33AAFF;
    background-color: #F0F2F5;
  }
  /deep/ .ant-modal-content{
    width: 150%;
    left: -24%;
  }
.highlight {
  background-color: rgb(255, 192, 105);
  padding: 0px;
}
</style>
